<template>
    <div>
        <el-form>
            <el-form-item label="这是来自非父子组件Child的消息:">
                <el-input v-model="msgFromChild" />
            </el-form-item>
            <el-form-item label="待办事项:">
                <el-input v-model="text" />
            </el-form-item>
            <el-form-item>
                <el-button @click="clearInput">清空</el-button>
                <el-button type="primary" @click="submit">提交</el-button>
                <el-button type="danger" @click="$emit('removeAll')">数据重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import { ref, onMounted } from 'vue'
import bus from 'vue3-eventbus'

export default {
    name: 'ToDo',
    setup(props, { emit }) {
        const text = ref("")
        const msgFromChild = ref("")
        
        const clearInput = () => {
            text.value = ''
        }
        
        const submit = () => {
            emit('toList', text.value)
            text.value = ''
        }
        
        onMounted(() => {
            bus.on('getMsg', (value) => {
                msgFromChild.value = value
            })
        })

        return {
            text,
            clearInput,
            submit,
            msgFromChild
        }
    }
}
</script>
